<!--  -->
<script lang="ts" setup>
import {} from 'vue'
import ScreenHeader from '../../components/screen/header.vue'
import ScreenFooter from '../../components/screen/footer.vue'
import ScreenFlyLineChart from '../../components/screen/flylineChart.vue'
</script>

<template>
  <div class="screen-container">
    <ScreenHeader></ScreenHeader>
    <div class="screen-row1">
      <dv-border-box1>
        <div class="item">
          <!-- <ScreenFlyLineChart></ScreenFlyLineChart> -->
        </div>
      </dv-border-box1>
      <dv-border-box11 title="dv-border-box-11" :title-width="400">
      </dv-border-box11>
      <div>
        <dv-border-box8>
          <div class="item-fly">
            <ScreenFlyLineChart></ScreenFlyLineChart>
          </div>
        </dv-border-box8>
      </div>
    </div>
    <!-- <div class="screen-row">
      <dv-border-box3>
        <div class="item">dv-border-box3</div>
      </dv-border-box3>
      <dv-border-box12>
        <div class="item">dv-border-box12</div>
      </dv-border-box12>
      <dv-border-box13>
        <div class="item">dv-border-box8</div>
      </dv-border-box13>
    </div> -->
    <ScreenFooter></ScreenFooter>
  </div>
</template>

<style lang="scss" scoped>
.screen-container {
  background-color: #020308;
  width: 100vw;
  height: 100vh;
  color: #ffffff;
  .screen-row1 {
    display: flex;
    flex-direction: row;
    height: 525px;
    margin-bottom: 5px;
    .item {
      margin: 1% auto;
      width: 480px;
      height: 347px;
    }
    .item-fly {
      width: 720px;
      height: 520px;
      padding: 5px;
    }
  }
  .screen-row {
    display: flex;
    flex-direction: row;
    height: 320px;
    margin-bottom: 5px;
    .item {
      margin: 1% auto;
      width: 98%;
      height: 98%;
    }
  }
}
</style>
